<template>
  <el-dialog
    v-model="visible"
    :title="`场景详情 - ${sceneDetail?.scene_name || '加载中...'}`"
    width="1200px"
    :close-on-click-modal="false"
    top="5vh"
  >
    <div v-loading="loading" class="detail-content" v-if="sceneDetail">
      <!-- 基本信息 -->
      <div class="detail-section">
        <h3 class="section-heading">基本信息</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="场景名称">
            {{ sceneDetail?.scene_name }}
          </el-descriptions-item>
          <el-descriptions-item label="场景编码">
            {{ sceneDetail?.scene_code }}
          </el-descriptions-item>
          <el-descriptions-item label="场景类型">
            <el-tag
              :type="sceneDetail?.is_builtin ? 'warning' : 'info'"
              size="small"
            >
              {{ sceneDetail?.is_builtin ? "内置" : "自定义" }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="启用状态">
            <el-tag
              :type="sceneDetail?.is_enabled ? 'success' : 'danger'"
              size="small"
            >
              {{ sceneDetail?.is_enabled ? "启用" : "禁用" }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="优先级">
            <el-tag
              :type="getPriorityType(sceneDetail?.priority_level)"
              size="small"
            >
              {{ getPriorityText(sceneDetail?.priority_level) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="分类">
            {{ sceneDetail?.category || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="描述" :span="2">
            {{ sceneDetail?.description || "-" }}
          </el-descriptions-item>
          <el-descriptions-item
            label="标签"
            :span="2"
            v-if="sceneDetail?.tags && sceneDetail.tags.length > 0"
          >
            <el-tag
              v-for="(tag, index) in sceneDetail.tags"
              :key="index"
              size="small"
              style="margin-right: 8px; margin-bottom: 4px"
            >
              {{ tag }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 关键词配置 -->
      <div class="detail-section">
        <h3 class="section-heading">关键词配置</h3>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="主关键词">
            <div
              v-if="
                sceneDetail?.main_keywords &&
                sceneDetail.main_keywords.length > 0
              "
            >
              <el-tag
                v-for="(keyword, index) in sceneDetail.main_keywords"
                :key="index"
                type="success"
                size="small"
                style="margin-right: 8px; margin-bottom: 4px"
              >
                {{ keyword }}
              </el-tag>
            </div>
            <span v-else class="no-data">-</span>
          </el-descriptions-item>
          <el-descriptions-item label="辅助关键词">
            <div
              v-if="
                sceneDetail?.aux_keywords && sceneDetail.aux_keywords.length > 0
              "
            >
              <el-tag
                v-for="(keyword, index) in sceneDetail.aux_keywords"
                :key="index"
                type="info"
                size="small"
                style="margin-right: 8px; margin-bottom: 4px"
              >
                {{ keyword }}
              </el-tag>
            </div>
            <span v-else class="no-data">-</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 统计信息 -->
      <div class="detail-section">
        <h3 class="section-heading">统计信息</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="使用次数">
            <span class="stat-value primary">
              {{ sceneDetail?.usage_count || 0 }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="最后使用时间">
            {{ sceneDetail?.last_used_at || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="关联任务数">
            <span class="stat-value info">
              {{ sceneDetail?.task_count || 0 }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="检测资产数">
            <span class="stat-value success">
              {{ sceneDetail?.asset_count || 0 }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="平均风险评分">
            <span class="stat-value warning">
              {{
                sceneDetail?.avg_risk_score
                  ? sceneDetail.avg_risk_score.toFixed(1)
                  : "-"
              }}
            </span>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 管理信息 -->
      <div class="detail-section">
        <h3 class="section-heading">管理信息</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="责任部门">
            {{ sceneDetail?.responsible_department || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="默认动作">
            {{ getDefaultActionText(sceneDetail?.default_action) }}
          </el-descriptions-item>
          <el-descriptions-item label="创建者">
            {{ sceneDetail?.created_by || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ sceneDetail?.created_time || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="更新者">
            {{ sceneDetail?.updated_by || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">
            {{ sceneDetail?.updated_time || "-" }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 扩展配置 -->
      <div class="detail-section" v-if="sceneDetail?.config">
        <h3 class="section-heading">扩展配置</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="自动清理">
            <el-tag
              :type="sceneDetail.config.auto_cleanup ? 'success' : 'info'"
              size="small"
            >
              {{ sceneDetail.config.auto_cleanup ? "启用" : "禁用" }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="保留天数">
            {{ sceneDetail.config.retention_days || "-" }} 天
          </el-descriptions-item>
          <el-descriptions-item
            label="缓存启用"
            v-if="sceneDetail.config.cache_enabled !== undefined"
          >
            <el-tag
              :type="sceneDetail.config.cache_enabled ? 'success' : 'info'"
              size="small"
            >
              {{ sceneDetail.config.cache_enabled ? "启用" : "禁用" }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item
            label="缓存TTL"
            v-if="sceneDetail.config.cache_ttl"
          >
            {{ sceneDetail.config.cache_ttl }} 秒
          </el-descriptions-item>
          <el-descriptions-item
            label="最大结果数"
            v-if="sceneDetail.config.max_results"
          >
            {{ sceneDetail.config.max_results }}
          </el-descriptions-item>
          <el-descriptions-item
            label="搜索超时"
            v-if="sceneDetail.config.search_timeout"
          >
            {{ sceneDetail.config.search_timeout }} 秒
          </el-descriptions-item>
          <el-descriptions-item
            label="并行搜索"
            v-if="sceneDetail.config.parallel_search !== undefined"
          >
            <el-tag
              :type="sceneDetail.config.parallel_search ? 'success' : 'info'"
              size="small"
            >
              {{ sceneDetail.config.parallel_search ? "启用" : "禁用" }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item
            label="通知启用"
            v-if="sceneDetail.config.notification_enabled !== undefined"
          >
            <el-tag
              :type="
                sceneDetail.config.notification_enabled ? 'success' : 'info'
              "
              size="small"
            >
              {{ sceneDetail.config.notification_enabled ? "启用" : "禁用" }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item
            label="通知阈值"
            v-if="sceneDetail.config.notification_threshold"
          >
            {{ sceneDetail.config.notification_threshold }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>

    <template #footer>
      <el-button @click="handleCancel">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from "vue";

// 定义props
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  sceneDetail: {
    type: Object,
    default: () => null,
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

// 定义emits
const emit = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
}>();

// visible computed 属性
const visible = computed({
  get: () => props.modelValue,
  set: (value: boolean) => emit("update:modelValue", value),
});

// 获取优先级类型
const getPriorityType = (
  level?: string
): "success" | "warning" | "danger" | "info" => {
  if (!level) return "info";
  const typeMap: Record<string, "success" | "warning" | "danger" | "info"> = {
    high: "danger",
    medium: "warning",
    low: "success",
  };
  return typeMap[level] || "info";
};

// 获取优先级文本
const getPriorityText = (level?: string): string => {
  if (!level) return "-";
  const textMap: Record<string, string> = {
    high: "高",
    medium: "中",
    low: "低",
  };
  return textMap[level] || level;
};

// 获取默认动作文本
const getDefaultActionText = (action?: string): string => {
  if (!action) return "-";
  const textMap: Record<string, string> = {
    review: "审核",
    alert: "告警",
    ticket: "工单",
  };
  return textMap[action] || action;
};

// 取消
const handleCancel = () => {
  emit("update:modelValue", false);
};
</script>

<style scoped lang="scss">
.detail-content {
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 10px;
}

.detail-section {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.section-heading {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 15px 0;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-value {
  font-weight: 600;
  font-size: 18px;

  &.primary {
    color: #409eff;
  }

  &.info {
    color: #909399;
  }

  &.success {
    color: #67c23a;
  }

  &.warning {
    color: #e6a23c;
  }
}

.no-data {
  color: #909399;
  font-size: 14px;
}
</style>
